<template>
	<div class="newsinfo-container">
		<h3 class="title">{{newinfo.title}}</h3>
		<p class="subtitle">
			<span>{{newinfo.add_time|dateFormat}}</span>
			<span>点击：{{newinfo.click}}次</span>
		</p>
		
		<hr>
		<!-- 内容区域 -->
		<div class="content" v-html="newinfo.content">
			<!-- v-html是把字符串转换为html代码 -->
		</div>
		<!-- 评论子组件区域 -->
		<!-- 把id传给子组件 -->
		<comment-box :id="this.id"></comment-box>
	</div>
</template>

<script>
	// 1.导入comment子组件
	import comment from '../subcomponents/comment.vue'
	export default{
		data(){
			return{
				// 把文章的id挂载到data
				id:this.$route.params.id,
				newinfo:{}
			}
		},
		created(){
			this.getNewsInfo();
		},
		methods:{
			getNewsInfo:function(){
				this.axios.post('http://localhost:3000/api/getnew/'+this.id,{id:this.id})
				.then((response) => {
					this.newinfo=
					{id:response.data.data[0].id,
					title:response.data.data[0].title,
					add_time:response.data.data[0].add_time,
					click:response.data.data[0].click,
					url:response.data.data[0].url,
					content:response.data.data[0].content
					},
					console.log(this.newinfo)
				})
			}
		},
		components:{
			// 2.注册子组件
			'comment-box':comment
		},
	}
</script>

<style lang="scss" scoped>
	.newsinfo-container{
		padding: 0 4px; 
		.title{
			font-size: 16px;
			text-align: center;
			margin: 15px 0;
			color: blue;
		}
		.subtitle{
			font-size: 13px;
			color: #226aff;
			display: flex;
			justify-content: space-between;
		}
		.content{
			img{
				width: 100%;
			}
		}
	}
</style>
